<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Border 属性演示</title>
</head>
<body>
  <h4>示例1.border</h4>
  <style>
    .demo1 {
      margin: 0.2rem;
      padding: 1em;
      border: 0.5rem outset pink;
      border-radius: 12px;
      font: bold 1rem sans-serif;
    }
    
    .demo2 {
      margin: 1rem;
      padding: 2px;
      border-radius: 12px;
    }
    </style>
    <div class="demo1">I have a border, 我有一个边框，使用border属性设置outset样式。</div>
    <div class="demo2" style="border: 5px inset pink">我也是一个边框，使用border属性设置inset样式。</div>
    <div class="demo2" style="border: 5px dotted pink">我也是一个边框，使用border属性设置dotted样式。</div>
    <div class="demo2" style="border: 5px dashed pink">我也是一个边框，使用border属性设置dashed样式。</div>
    <div class="demo2" style="border: 5px solid pink">我也是一个边框，使用border属性设置solid样式。</div>
    <div class="demo2" style="border: 5px double pink">我也是一个边框，使用border属性设置double样式。</div>
    <div class="demo2" style="border: 5px dotted pink">我也是一个边框，使用border属性设置groove样式。</div>
    <div class="demo2" style="border: 5px groove pink">我也是一个边框，使用border属性设置ridge样式。</div>

    <hr>
    <h4>示例2.border-block</h4>
    <style>
      .container {
        background-color: #eee;
        color: #8b008b;
      }
      .demo3 {
        border-block: double green; 
        writing-mode: horizontal-tb;
      }
      .demo4 {
        border-block-start: dashed red; 
        writing-mode: vertical-rl;
      }
      .demo5 {
        border-block-end: solid rgb(23, 221, 122); 
        writing-mode: horizontal-tb;
      }
    </style>
    <div class="container">
      <div class="demo3">我是 border-block 属性测试用例,针对文字方向的顶部以及尾部进行边框绘制</div>
      <div class="demo4">我是 border-block-start 属性测试用例</div>
      <div class="demo5">我是 border-block-end 属性测试用例,针对文字方向的尾部</div>
    </div>
    
    <hr>
    <h4>示例4.创建有宽度的不可见边框，以及所有边框属性在一个声明之中</h4>
      <style>
        a {text-decoration:none;}   /**去除下划线**/
        a:link, a:visited {   /**伪类**/
          border-style: solid;
          border-width: 2px;
          border-color: transparent;
          }
        a:hover {border-color: rgb(0, 0, 0);}   /**移动到A元素上面的时候进行转换边框颜色**/
        .demo6 > p {
          border:3px dotted rgba(42,128,85,0.5) !important;
          border-style:dotted solid;
          border-color: transparent; /* 默认优先级高 */
        }
      </style>

      
      <div class="demo6">
        <a href="#">鼠标</a>
        <a href="#">点击移动到这里</a>
        <a href="#">会变变出边框</a>
        <p>所有边框属性在一个声明之中</p>
      </div>



</body>
</html>